import React, { useState, useEffect, useRef } from 'react';
import { View, ActivityIndicator, Text, StyleSheet, BackHandler, Alert, Platform, PermissionsAndroid } from 'react-native';
import MapContainer from './MapContainer';

/**
 * 优化的地图容器
 * 通过延迟加载和内存管理减少闪退风险
 */
const OptimizedMapContainer: React.FC<any> = (props) => {
  const [isReady, setIsReady] = useState(false);
  const [hadError, setHadError] = useState(false);
  const [loadingState, setLoadingState] = useState('preparing'); // preparing, checking_permissions, loading
  const renderTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const mountedRef = useRef(true);

  // 预先检查位置权限
  const checkLocationPermission = async () => {
    setLoadingState('checking_permissions');
    try {
      if (Platform.OS === 'android') {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
          {
            title: "位置权限",
            message: "查找医院需要访问您的位置",
            buttonNeutral: "稍后询问",
            buttonNegative: "取消",
            buttonPositive: "确定"
          }
        );
        return granted === PermissionsAndroid.RESULTS.GRANTED;
      }
      return true; // iOS通过其他方式处理权限
    } catch (err) {
      console.error('权限检查错误:', err);
      return false;
    }
  };

  // 添加延迟加载以减轻初始化压力
  useEffect(() => {
    // 通过微任务延迟渲染
    const prepare = async () => {
      try {
        // 先检查必要权限
        const hasPermission = await checkLocationPermission();
        
        if (!hasPermission) {
          // 即使没有权限，也可以允许继续使用地图（会使用默认位置）
          Alert.alert(
            '需要位置权限',
            '查找附近医院需要访问您的位置。如需使用此功能，请在设置中允许位置访问。您仍可继续使用默认位置查看医院。',
            [
              { text: '取消', onPress: () => props.navigation?.goBack() },
              { text: '继续', onPress: () => {
                setLoadingState('loading');
                // 减少延迟时间，确保更快地加载地图
                renderTimeoutRef.current = setTimeout(() => {
                  if (mountedRef.current) {
                    setIsReady(true);
                  }
                }, 200); // 减少延迟时间
              }}
            ]
          );
          return;
        }
        
        setLoadingState('loading');
        
        // 减少延迟时间，确保更快地加载地图
        renderTimeoutRef.current = setTimeout(() => {
          if (mountedRef.current) {
            setIsReady(true);
          }
        }, 200); // 减少延迟时间
      } catch (error) {
        console.error('地图准备过程发生错误:', error);
        setHadError(true);
      }
    };

    prepare();

    // 添加硬件返回按钮处理
    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
      if (renderTimeoutRef.current) {
        clearTimeout(renderTimeoutRef.current);
      }
      
      // 清理掉所有进行中的异步操作和资源
      if (!isReady) {
        props.navigation?.goBack();
        return true; // 消费事件
      }
      
      return false; // 不消费事件，允许默认行为
    });

    return () => {
      mountedRef.current = false;
      if (renderTimeoutRef.current) {
        clearTimeout(renderTimeoutRef.current);
      }
      backHandler.remove();
    };
  }, [props.navigation]);

  // 错误处理
  const handleMapError = () => {
    setHadError(true);
    Alert.alert(
      '加载错误',
      '地图加载失败，请尝试重新进入',
      [{ text: '确定', onPress: () => props.navigation?.goBack() }]
    );
  };

  // 处理不同加载状态的渲染
  const renderLoadingContent = () => {
    switch(loadingState) {
      case 'checking_permissions':
        return (
          <>
            <ActivityIndicator size="large" color="#0052d9" />
            <Text style={styles.loadingText}>正在检查位置权限...</Text>
          </>
        );
      case 'loading':
      default:
        return (
          <>
            <ActivityIndicator size="large" color="#0052d9" />
            <Text style={styles.loadingText}>正在准备地图资源...</Text>
            <Text style={styles.loadingSubtext}>首次加载可能需要较长时间，请耐心等待</Text>
          </>
        );
    }
  };

  if (hadError) {
    return (
      <View style={styles.loadingContainer}>
        <Text style={styles.errorText}>地图加载失败，请退出重试</Text>
        <Text style={styles.errorSubtext}>请确保已开启位置服务并允许应用使用位置权限</Text>
      </View>
    );
  }

  if (!isReady) {
    return (
      <View style={styles.loadingContainer}>
        {renderLoadingContent()}
      </View>
    );
  }

  return <MapContainer {...props} onError={handleMapError} />;
};

const styles = StyleSheet.create({
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  loadingText: {
    marginTop: 16,
    fontSize: 16,
    color: '#333',
    textAlign: 'center',
  },
  loadingSubtext: {
    marginTop: 8,
    fontSize: 14,
    color: '#666',
    textAlign: 'center',
    paddingHorizontal: 30,
  },
  errorText: {
    fontSize: 16,
    color: 'red',
    textAlign: 'center',
    padding: 20,
  },
  errorSubtext: {
    fontSize: 14,
    color: '#666',
    textAlign: 'center',
    paddingHorizontal: 30,
  },
});

export default OptimizedMapContainer; 